<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Jet Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <asset>pure-min.css</asset>
    <asset>jet.css</asset>
    <asset>vue-min.js</asset>
    <asset>jet.js</asset>
</head>
<body>
    <div id="app">
        <p style="text-align:center;">
            <img src="app-local:jet-icon.png" class="pure-image" style="width:80px;" />
        </p>
        <div style="padding: 16px;">
            <p>
                <strong style="font-size:24px;">{{message}}</strong>
            </p>
            <form class="pure-form">
                <label>Your name:</label><br>
                <input type="text" v-model="username" />
            </form>
            <p>
                <a v-on:click="welcome()" class="pure-button button-blue">欢迎词</a>
                <a href="app-page:param?id=112358&total=200" class="pure-button">传参测试</a>
                <a href="app-page:login" class="pure-button button-green">登录页</a>
            </p>
        </div>
        <div class="pure-g">
            <div class="pure-u-1-3" style="background-color:#ccc;">1/3</div>
            <div class="pure-u-1-3" style="background-color:#eee;">1/3</div>
            <div class="pure-u-1-3" style="background-color:#ccc;">1/3</div>
        </div>
        <p>&nbsp;</p>
        <p style="text-align: center;"><small>version: 2.0</small></p>
    </div>
</body>
<script>
    const jet = new Jet();
    new Vue({
        el: '#app',
        data: {
            message: 'hello',
            username: ''
        },
        methods: {
            welcome: function(e) {
                this.message = 'hi, '+this.username;
            }
        }
    });
    jet.onResume(function(){
        console.log('------> 桥接层：页面恢复.');
    });
    jet.onPause(function() {
        console.log('------> 桥接层：页面暂停.');
    });
</script>
</html>